<template>
    <div class="castingManagement">
        <div class="castingManagement-table-header">
            <div class="nth-child">
                <el-input v-model="pageQuery.nftName" clearable placeholder="请输入商品名称" />
                <el-input v-model="pageQuery.denomId" clearable placeholder="请输入分类id"/>
                <el-button type="primary" @click="theQuery">查询</el-button>
                <el-button type="primary" @click="clearSearch">重置</el-button>
            </div>
            <div>
                <!-- <el-button type="primary" @click="onCasting">铸造</el-button> -->
                <!-- <el-button type="primary" @click="onDestruction">销毁</el-button> -->
                <!-- <el-button type="primary" @click="onCastingMany">铸造多个</el-button> -->
            </div>
        </div>

        <el-table :data="dataList" border style="width: 100%" :header-cell-style="{'text-align':'center'}" :cell-style="{'text-align':'center'}">
            <el-table-column prop="blockchain" label="区块链" width="120" >
                <template scope="scope">
                  <p v-if="scope.row.blockchain=='dt'">大唐链</p>
                  <p v-if="scope.row.blockchain=='wc'">文昌链-天和</p>
                  <p v-if="scope.row.blockchain=='avata'">文昌链-天舟</p>
                  <p v-if="scope.row.blockchain=='szavata'">文昌链-神舟</p>
                  <p v-if="scope.row.blockchain=='hw'">华为链</p>
                </template>
            </el-table-column>
            <el-table-column prop="denomName" label="类别名称" width="100" />
            <el-table-column prop="denomId" label="类别ID" width="320" />
            <el-table-column prop="nftName" label="商品名称" width="300" />
            <el-table-column prop="count" label="商品总数量" width="120" />
          <el-table-column prop="chainUpStatusCount" label="上链数量" width="120"/>
          <el-table-column prop="useStatusCount" label="使用数量" width="120"/>
          <el-table-column prop="surplusActivateCount" label="剩余激活数量" width="120"/>
<!--            <el-table-column prop="userId" label="铸造账号" width="120" />-->
<!--            <el-table-column prop="userName" label="铸币账号" width="180" />-->
            <el-table-column prop="createTime" label="提交时间" width="160" />
<!--            <el-table-column prop="status" label="铸币状态" width="90">-->
<!--                <template scope="scope">-->
<!--                    <p v-if="scope.row.status=='0'">失败</p>-->
<!--                    <p v-if="scope.row.status=='1'">成功</p>-->
<!--                    <p v-if="scope.row.status=='2'">铸币中</p>-->
<!--                </template>-->
<!--            </el-table-column>-->
<!--            <el-table-column prop="addtoStatus" label="追加状态" width="90">-->
<!--                <template scope="scope">-->
<!--                    <p v-if="scope.row.addtoStatus=='0'">失败</p>-->
<!--                    <p v-if="scope.row.addtoStatus=='1'">成功</p>-->
<!--                </template>-->
<!--            </el-table-column>-->
            <!-- <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" icon="el-icon-search" @click="handleClick(dataList.list[scope.$index])">查看</el-button>
                    <el-button v-if="scope.row.dawType!='1'" size="mini" type="text" icon="el-icon-edit"  @click="addOrUpdateHandle(scope.row)">追加铸币</el-button>
                </template>
            </el-table-column> -->
        </el-table>

        <!-- 分页 -->
         <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page.currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="page.pageSize"
          :total="page.total"
          layout="total, sizes, prev, pager, next, jumper"></el-pagination>

        <!-- 查看弹窗 -->
<!--        <to-view v-if="toViewShow" :daw-info="dawInfo" @hidden="toViewHidden" />-->

        <!-- 弹窗, 新增 / 修改 -->
<!--        <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getPage()" />-->

        <!-- 铸造弹窗 -->
<!--        <casting v-if="castingShow" @hidden="castingHidden" />-->

        <!-- 铸造多个弹窗 -->
        <!-- <castingMany v-if="castingManyShow" @hidden="castingManyHidden" /> -->

        <!-- 销毁弹窗 -->
<!--        <destruction v-if="destructionShow" @hidden="destructionHidden" />-->

    </div>
</template>

<script>
import toView from "./to-view.vue" //查看弹窗
import casting from './casting.vue' // 铸造弹窗
// import castingMany from './castingMany.vue' // 铸造弹窗
import destruction from './destruction.vue' // 销毁弹窗
import AddOrUpdate from './add-or-update.vue'
export default {
    components:{
        toView,
        casting,
        // castingMany,
        destruction,
        AddOrUpdate
    },
    data(){
        return{
            dataList: [],

            // dawInfo: {
            //     dawNameId: '',
            //     count: '',
            //     dawName: '',
            //     denomName: ''
            // },

            // 查询的参数
            pageQuery: {
                pageSize: 10,
                pageNum: 1,
                nftName: '',
                denomId: ''
            },

            //返回的参数
            page: {
                total: 0, // 总页数
                pageNum: 1, // 当前页数
                pageSize: 10 // 每页显示多少条
            },

            toViewShow: false,
            castingShow: false,
            // castingManyShow: false,
            addOrUpdateVisible: false,
            destructionShow: false,
        }
    },
    mounted(){
        this.getDataList(this.page)
    },
    methods:{
        // 点击显示查看弹窗
        handleClick(info) {
            this.dawInfo.dawNameId = info.id
            this.dawInfo.count = info.count // 数量
            this.dawInfo.dawName = info.dawName // 名称
            this.dawInfo.denomName = info.denomName
            this.toViewShow = true
        },


        //列表
        getDataList(page){
          this.dataListLoading = true
            this.$http({
                url: this.$http.adornUrl(`/admin/nftdaw/getpageDaw?pageSize=${this.pageQuery.pageSize}&pageNum=${this.pageQuery.pageNum}`),
                method: 'get',
            }).then(({ data }) => {
                this.dataList = data.list;
                this.page.total = data.total;
                this.dataListLoading = false
            } )
        },


        //查询
        theQuery(){
          this.dataListLoading = true
          this.$http({
            url: this.$http.adornUrl(`/admin/nftdaw/getpageDaw?pageSize=${this.pageQuery.pageSize}&pageNum=${this.pageQuery.pageNum}&nftName=${this.pageQuery.nftName || ''}&denomId=${this.pageQuery.denomId || ''}`),
            method: 'get',
          }).then(({ data }) => {
            this.dataList = data.list
            this.page.total = data.total
            this.dataListLoading = false
          })
        },
      clearSearch () {
        this.pageQuery.nftName = ''
        this.pageQuery.denomId = ''
        this.theQuery()
      },
        // 点击隐藏查看弹窗
        toViewHidden() {
            this.toViewShow = false
        },

        //点击显示铸造弹窗
        onCasting(){
            this.castingShow = true;
        },
        //点击隐藏铸造弹窗
        castingHidden() {
            this.castingShow = false;
            // this.$router.go(0);
        },

        // 点击显示铸造多个弹窗
        // onCastingMany() {
        //     this.castingManyShow = true
        // },
        // 点击隐藏铸造多个弹窗
        // castingManyHidden() {
        //     this.castingManyShow = false;
        //     // this.$router.go(0);
        // },



        //点击显示销毁弹窗
        onDestruction(){
            this.destructionShow = true
        },
        // 点击隐藏销毁弹窗
        destructionHidden() {
            this.destructionShow = false
        },



        //分页按钮
        handleSizeChange (val) {
            // this.page.pageSize = val
            this.pageQuery.pageSize = val
            this.getDataList(this.page)
        },
        handleCurrentChange (val) {
            // this.page.currentPage = val
            this.pageQuery.pageNum = val
            this.getDataList(this.page)
        },
    }
}
</script>

<style scoped>
    .castingManagement {
        width: 95%!important;
        margin: 30px auto 0;
    }
    .castingManagement-table-header {
        height: 50px;
        border: 1px solid #ddd;
        border-bottom: transparent;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 0 30px;
    }
    .castingManagement-table-header div:first-child {
        display: flex;
        align-items: center;
    }
    .castingManagement-table-header div:first-child span {
        margin-right: 10px;
    }
    .castingManagement-table-header div.nth-child { display: flex; }
    .el-input { width: 60% !important; }
    .castingManagement-table-header div.nth-child input {
        width: 250px;
        margin-right: 10px !important;
    }
    .castingManagement-table-header div.nth-child button {
        width: 80px;
        margin: 0 5px;
        border: 1px solid #ddd;
    }
    .castingManagement >>> .has-gutter tr th .cell,
    .castingManagement >>> .el-table__row td .cell{ text-align: center; }
</style>
